<template>
  <div class="listCard">
    <!-- <h1 class="h1Style">数据展示</h1> -->
    <ul>
      <li>
        <img src="@/assets/images/box1.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.yearCount ? ymdTypeDueCountData.yearCount : 0}}</p>
          <p class="top-name">本年（件）</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/box2.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.monthCount ? ymdTypeDueCountData.monthCount : 0}}</p>
          <p class="top-name">本月（件）</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/box3.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.dayCount ? ymdTypeDueCountData.dayCount : 0}}</p>
          <p class="top-name">本日（件）</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/box5.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.handleEfficyCount ? ymdTypeDueCountData.handleEfficyCount : 0}}</p>
          <p class="top-name">办结率（%）</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/box6.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.satifyEfficyCount ? ymdTypeDueCountData.satifyEfficyCount : 0}}</p>
          <p class="top-name">满意率（%）</p>
        </div>
      </li>
      <li>
        <img src="@/assets/images/box4.png"
             alt="">
        <div>
          <p class="top-value">{{ymdTypeDueCountData.overdueEfficyCount ? ymdTypeDueCountData.overdueEfficyCount : 0}}</p>
          <p class="top-name">超期率（%）</p>
        </div>
      </li>

    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        ymdTypeDueCountData: {}
      }
    },
    created () {
      this.getYmdTypeDueCountsFn()
    },
    methods: {
      getYmdTypeDueCountsFn () {
        this.$axios.post(this.$api.homeCharts.ymdEffciencyCounts).then(rs => {
          if (rs) {
            this.ymdTypeDueCountData = rs
          }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
  .listCard {
    // height: 400px;
    overflow: auto;
    .h1Style {
      font-size: 18px;
      text-align: center;
      margin-bottom: 30px;
    }
    ul {
      text-align: center;
      margin: 0 auto;
      li {
        display: inline-block;
        position: relative;
        margin: 0 8px;
        margin-top: 15px;
        img {
          display: block;
        }
        div {
          position: absolute;
          width: 100%;
          top: 20px;
          left: 0;
          p {
            color: white;
            cursor: default;
          }
          .top-value {
            font-size: 32px;
            font-weight: 600;
            line-height: 40px;
            padding-left: 74px;
          }
          .top-name {
            font-size: 10px;
            color: #ffffff;
            padding-top: 22px;
            padding-left: 74px;
          }
        }
      }
    }
  }
</style>
